<template>
  <div class="map-container">
    <ShipInfoCard :shipInfo="shipInfo" ref="shipInfo" />
    <MapCard ref="map" :shipInfo="shipInfo" />
  </div>
</template>

<script>
import MapCard from "./map/index.vue";
import ShipInfoCard from "./shipInfo/index.vue";
import MQTT from "@/mixins/mqtt.js";
import { get24stat } from "@/api/cabin/statisticsNavigation";
import { getLatest as getGPSLatest } from "@/api/cabin/gpsData";
import { getLatest as getTiltLatest } from "@/api/cabin/tiltData";
import { mapGetters } from "vuex";
let interval24 = null;
const initInfo = () => {
  return {
    lon: "---°--.---′N",
    lat: "--°--.---′E",
    hod: "---",
    rot: "---",
    cog: "---",
    sog: "---",
    stw: "---",
    speed: "---",
    direction: "---",
    depth: 0,
    xaxisAngle: 0,
    yaxisAngle: 0,
    tdt: 0,
    as: 0,
    stat: "Moored",
  };
};

export default {
  components: { MapCard, ShipInfoCard },
  mixins: [MQTT],
  data() {
    return {
      shipInfo: initInfo(),
    };
  },
  computed: {
    ...mapGetters(["currentMMSI"]),
    topicList() {
      return this.getTopic(["gps"]);
    },
  },
  methods: {
    refreshShipInfo(row) {
      this.shipInfo = Object.assign({}, this.shipInfo, row);
      if (this.shipInfo.sog && this.shipInfo.sog > 1) {
        this.shipInfo.stat = "Under Way";
      } else {
        this.shipInfo.stat = "Moored";
      }
    },
    refreshDepth(row) {
      this.shipInfo.depth = row.depth + row.offset;
    },
    drawOtherShip(row) {
      this.$refs.map.otherShipMove(row);
    },
    drawRadarShip(row) {
      this.$refs.map.radarShipMove(row);
    },
    get24Data() {
      get24stat({ mmsi: this.currentMMSI }).then(({ data }) => {
        this.$set(this.shipInfo, "tdt", data.sailDistance);
        this.$set(this.shipInfo, "as", data.avgSpeed);
      });
    },
    getGPSLatest() {
      getGPSLatest({ mmsi: this.currentMMSI }).then(({ data }) => {
        if (!data) {
          this.refreshShipInfo({
            mmsi: 0,
          });
        } else {
          this.refreshShipInfo(data);
        }
      });
    },
    getTiltLatest() {
      getTiltLatest({ mmsi: this.currentMMSI }).then(({ data }) => {
        this.refreshShipInfo(data);
      });
    },
    initWeb(oldMMSI = 0) {
      if (interval24) return;
      this.shipInfo = initInfo();
      if (oldMMSI != 0) {
        const oldTopicList = this.getTopic(["gps"], oldMMSI);
        this.mqttUnsubscribe(oldTopicList);
      }
      this.mqttSubscribe(this.topicList);
      this.get24Data();
      this.getGPSLatest();
      this.getTiltLatest();
      interval24 = setInterval(() => {
        this.get24Data();
        this.getGPSLatest();
        this.getTiltLatest();
      }, 1 * 60 * 1000);
    },
  },
  mounted() {
    this.$store
      .dispatch("getShipList")
      .then(() => {
        this.initWeb();
      })
      .catch(() => {});
  },
  destroyed() {
    clearInterval(interval24);
    interval24 = null;
  },
  watch: {
    currentMMSI(val, oldVal) {
      clearInterval(interval24);
      interval24 = null;
      console.log("当前MMSI: ", val);
      this.initWeb(oldVal);
    },
  },
};
</script>

<style scoped. lang="scss">
.map-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 265px calc(100% - 265px);
  grid-template-rows: 100%;
}
</style>
